<template>
	<view class="container">
		<view class="search-box">
			<u-search placeholder="请输入商品名称..." v-model="keyword"></u-search>
		</view>
		<view class="goods-classfy-wrap">
			<!-- style="height: 100vh;width: 200rpx;background-color: #fff;" -->
			<view class="classfy-wrap" >
				<!-- style="height: 100vh;" -->
				<scroll-view scroll-y="true" >
					<view class="list">
						<view :class="['item', current == i ? 'current' : '']" v-for="(item, i) in productCenterIconList" :key="item.id" @tap="currentHandle(item, i)">
							{{item.name || ''}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="content-wrap">
				<!-- style="height: 100vh;" -->
				<scroll-view scroll-y="true" style="height: 100%;">
					<view style="width: 100%;margin-bottom: 30rpx;">
						<u--image src="/static/ming-pop/used.png" width="100%" height="200rpx" mode="widthFix"></u--image>
					</view>
					<view class="goods-list">
						<view class="goods-item" v-for="(item, i) in shopList" :key="item.id" @tap="toShopDetail(item.id)">
							<u--image :src="item.img" width="100rpx" height="140rpx"></u--image>
							<view class="goods-name">{{item.name || ''}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				productCenterIconList: [],
				shopList: [],
				shopQuery: {
					cat_id: '',
				},
				keyword: '',
			};
		},
		onLoad() {
			this.initbanner()
		},
		methods: {
			toShopDetail(id) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?data=' + id
				})
			},
			currentHandle(item, i) {
				this.current = i
				this.shopQuery.cat_id = item.id
				this.shopList = []
				this.getShoplist()
			},
			async initbanner() {
				const res = await this.$request('Index/IndexList', {})
				console.log('请求数据', res);
				this.productCenterIconList = res.cats
				try{
					this.shopQuery.cat_id = res.cats[0].id
				}catch(e){
					//TODO handle the exception
				}
				this.getShoplist()
			},
			async getShoplist(cb) {
				const res = await this.$request("Index/SeachGoods", {
					data: this.shopQuery,
					isLoad: false
				})
				this.shopList = res.result
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	@include flex-center(100%, 100vh);
	flex-direction: column;
	.search-box {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
	.goods-classfy-wrap {
		flex: 1;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		width: 100%;
		height: 100%;
		.classfy-wrap {
			width: 200rpx;
			height: 100%;
			background-color: #fff;
		}
	}
	.content-wrap {
		margin-left: 20rpx;
		flex: 1;
		padding-right: 20rpx;
		// flex: 1;
		// height: 100vh;
		
	}
	.list {
		.item {
			@include flex-center(100%, 100rpx);
			color: #999999;
			font-size: 24rpx;
		}
		.current {
			color: #fff;
			background-color: #8A9BE8;
		}
	}
}
.goods-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	.goods-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.goods-name {
		margin-top: 20rpx;
		width: 120rpx;
		@include over-ellip();
		font-size: 24rpx;
	}
}
</style>
